var lis = document.querySelectorAll('.s1 ul li');
console.log(lis);
var uls = document.querySelectorAll('.d2 ul');

for(var i = 0;i<lis.length;i++){
    lis[i].index=i;
    
    lis[i].onmouseover = function(){
        for(var i = 0;i<uls.length;i++){
            uls[i].style.display = 'none';
        }
       uls[this.index].style.display = 'block';
    }
}

//轮播图 
var index =0;
var timer =  setInterval(nextImg,1000);

function nextImg(){
    index = index == $('.pic li').length-1 ? 0:index+1;
    showImg();
}

function preImg(){
    index = index==0?$('.pic li').length-1:index-1;
    showImg();
}
// 展示图片和指示灯
    function showImg(){
        // 根据索引值显示当前图片，隐藏其他图片
        $('.pic li').eq(index).show().siblings().hide();
        $('.indicator li').eq(index).addClass('active').siblings().removeClass('active');
    }
    // 2.悬停切换
    $('.indicator li').hover(function(){
        // 鼠标进入指示灯，停止自动切换
        clearInterval(timer);
        // 获取当前选中的li标签的索引值
        index = $(this).index();
        showImg();
    },function(){
        timer = setInterval(nextImg,1500);
    });

    // 3.点击按钮切换
    $('.s3').hover(function(){
        clearInterval(timer);
  },function(){
        timer = setInterval(nextImg,1000);
    });
    // 上一张
    $('.page .prev').click(function(){
        prevImg();
    });
    // 下一张
    $('.page .next').click(function(){ 
        nextImg();
    });























